<template>
  <div class="app-container">
    <el-form class="el_one" :model="formInline">
      <el-row>
        <el-col :span="8">
          <div class="grid-content" style="padding-left: 12px;">
            <el-form-item label="订单编号:">
              <el-input v-model="formInline.id" placeholder="请输入订单编号" style="width: 250px;" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="institution-content">
            <el-form-item label="订单状态:" style="padding-left: 12px;">
              <el-select v-model="formInline.status" placeholder="请选择" style="width: 250px;">
                <el-option
                  label="待取件"
                  value="23000"
                />
                <el-option
                  label="已取件"
                  value="23001"
                />
                <el-option
                  label="运输中"
                  value="23005"
                />
                <el-option
                  label="派送中"
                  value="23007"
                />
                <el-option
                  label="已签收"
                  value="23009"
                />
                <el-option
                  label="拒收"
                  value="23010"
                />
                <el-option
                  label="已取消"
                  value="230011"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="institution-content">
            <el-form-item label="付费状态:" style="padding-left: 12px;">
              <el-select v-model="formInline.paymentStatus" placeholder="请选择" style="width: 250px;">
                <el-option
                  label="未付"
                  value="1"
                />
                <el-option
                  label="已付"
                  value="2"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="发件人姓名:">
              <el-input v-model="formInline.senderName" placeholder="请输入发件人姓名" style="width: 250px;" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="发件人电话:">
              <el-input v-model="formInline.senderPhone" placeholder="请输入发件人电话" style="width: 250px;" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="institution-content" style="padding-right: 60px;">
            <el-form-item label="发件人地址:">
              <el-row type="flex" justify="space-around">
                <el-col :span="8">
                  <el-select v-model="formData.provinceId" placeholder="请选择省" style="width:98%" @change="getCityList($event, 'change')">
                    <el-option
                      v-for="item in provinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-select v-model="formData.cityId" placeholder="请选择市" style="width:98%" @change="getAreaList($event, 'change')">
                    <el-option
                      v-for="item in cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-select v-model="formData.countyId" placeholder="请选择区" style="width:100%">
                    <el-option
                      v-for="item in areaList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="收件人姓名:">
              <el-input v-model="formInline.receiverName" placeholder="请输入收件人姓名" style="width: 250px;" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="收件人电话:">
              <el-input v-model="formInline.receiverPhone" placeholder="请输入收件人电话" style="width: 250px;" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="institution-content" style="padding-right: 60px;">
            <el-form-item label="发件人地址:">
              <el-row type="flex" justify="space-around">
                <el-col :span="8">
                  <el-select v-model="addresFormData.provinceId" placeholder="请选择省" style="width:98%" @change="addCityList($event, 'change')">
                    <el-option
                      v-for="item in addresProvinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-select v-model="addresFormData.cityId" placeholder="请选择市" style="width:98%" @change="addAreaList($event, 'change')">
                    <el-option
                      v-for="item in addresCityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-select v-model="addresFormData.countyId" placeholder="请选择区" style="width:100%">
                    <el-option
                      v-for="item in addresAreaList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="buttod-content">
            <el-form-item>
              <el-button type="danger" style="width: 90px" @click="fnSeaerch">搜索</el-button>
              <el-button style="width: 90px" @click="fnResetting">重置</el-button>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div class="el_tow">
      <div class="el_tow_yi">
        <template>
          <el-table
            :data="tableData"
            highlight-current-row
            style="width: 100%"
            size="mini"
          >
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column prop="id" label="订单编号" width="160" />
            <el-table-column prop="transportOrder.id" label="运单编号" width="130" />
            <el-table-column prop="createTime" label="下单时间" width="160" />
            <el-table-column label="订单状态" width="90">
              <template slot-scope="scope">
                <span v-if="scope.row.status==22000">已关闭</span>
                <span v-else-if="scope.row.status==23000">待取件</span>
                <span v-else-if="scope.row.status==23001">已取件</span>
                <span v-else-if="scope.row.status==23002">网点自寄</span>
                <span v-else-if="scope.row.status==23003">网点入库</span>
                <span v-else-if="scope.row.status==23004">待装车</span>
                <span v-else-if="scope.row.status==23005">运输中</span>
                <span v-else-if="scope.row.status==23006">网点出库</span>
                <span v-else-if="scope.row.status==23007">待派送</span>
                <span v-else-if="scope.row.status==23008">派送中</span>
                <span v-else-if="scope.row.status==23009">已签收</span>
                <span v-else-if="scope.row.status==23010">拒收</span>
                <span v-else-if="scope.row.status==230011">已取消</span>
              </template>
            </el-table-column>
            <el-table-column prop="senderName" label="发件人姓名" width="100" />
            <el-table-column prop="senderPhone" label="发件人电话" width="120" />
            <el-table-column prop="newArea" label="发件人地址" width="150" />
            <el-table-column prop="receiverName" label="收件人姓名" width="100" />
            <el-table-column prop="receiverPhone" label="收件人电话" width="120" />
            <el-table-column prop="newArea" label="收件人地址" width="150" />
            <el-table-column label="取件类型" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.pickupType==1">网点自寄</span>
                <span v-else>上门取件</span>
              </template>
            </el-table-column>
            <el-table-column label="付费类型" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.paymentMethod==1">预结</span>
                <span v-else>到付</span>
              </template>
            </el-table-column>
            <el-table-column label="付费状态" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.paymentStatus==1">未付</span>
                <span v-else>已付</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="85">
              <template slot-scope="scope">
                <el-button type="text" @click="handleClick(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <div class="el_s">
      <template>
        <div class="block">
          <el-pagination
            :current-page="paging.currentPage1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { getOrderpag, getCityList, getOrderDetaill } from '@/api/business'
export default {
  data() {
    return {
      paging: {
        currentPage1: 1
      },
      formInline: {
        id: '',
        status: '',
        paymentStatus: '',
        senderName: '',
        senderPhone: '',
        senderAddress: '',
        receiverName: '',
        receiverPhone: '',
        receiverAddress: '',
        receiverProvince: '',
        receiverCity: '',
        receiverCounty: '',
        page: 1,
        pageSize: 10
      },
      tableData: [
      ],

      list: [],
      counts: 0,
      newArr: [],
      formData: {}, // 发件人
      provinceList: [], // 发件人省份集合
      cityList: [], // 发件人城市集合
      areaList: [], // 发件人地区集合
      addresFormData: {}, // 收件人
      addresProvinceList: [], // 收件人省份集合
      addresCityList: [], // 收件人城市集合
      addresAreaList: []// 收件人地区集合
    }
  },
  created() {
    this.initData()
    this.getProvinceList() // 获取省份列表
    this.addProvinceList() // 获取省份列表
  },
  methods: {
    async initData() {
      const res = await getOrderpag(
        this.formInline
      )
      console.log(res)
      this.tableData = res.items
      this.counts = res.counts
      this.tableData.forEach(item => {
        item.newArea = item.receiverProvince.name + item.receiverCity.name + item.receiverCounty.name + item.receiverAddress
      })
      console.log(this.list)
    },
    // 搜索
    fnSeaerch() {
      this.initData()
    },
    // 重置
    fnResetting() {
      this.formInline.id = ''
      this.formInline.status = ''
      this.formInline.paymentStatus = ''
      this.formInline.senderName = ''
      this.formInline.senderPhone = ''
      this.formInline.receiverName = ''
      this.formInline.receiverPhone = ''
      this.formInline.page = 1
      this.formInline.pageSize = 10
      this.formData = {}
      this.addresFormData = {}
      this.initData()
    },
    // 城市数据
    async queryDetail() {
      this.loading = true
      this.formData = await getOrderDetaill(this.currentNode.id)
      // 处理一下数据的转化问题
      this.formData.provinceId = this.formData.province?.id
      this.formData.cityId = this.formData.city?.id
      this.formData.countyId = this.formData.county?.id
      this.formData.extra = ''
      // 获取对应的数据
      this.formData.cityId && this.getCityList(this.formData.provinceId) // 获取对应的城市列表
      this.formData.countyId && this.getAreaList(this.formData.cityId) // 获取对应的地区列表

      this.addresFormData = await getOrderDetaill(this.currentNode.id)
      // 处理一下数据的转化问题
      this.addresFormData.provinceId = this.addresFormData.province?.id
      this.addresFormData.cityId = this.addresFormData.city?.id
      this.addresFormData.countyId = this.addresFormData.county?.id
      this.addresFormData.extra = ''
      // 获取对应的数据
      this.addresFormData.cityId && this.addCityList(this.addresFormData.provinceId) // 获取对应的城市列表
      this.addresFormData.countyId && this.addAreaList(this.addresFormData.cityId) // 获取对应的地区列表
      this.loading = false
    },
    // 获取省份列表
    async getProvinceList() {
      this.provinceList = await getCityList()
      console.log(this.provinceList)
    },
    async addProvinceList() {
      this.addresProvinceList = await getCityList()
      console.log(this.addresProvinceList)
    },
    // 获取城市列表
    async getCityList(parentId, type) {
      this.cityList = await getCityList({ parentId })
      type === 'change' && (this.formData.cityId = null)
    },
    async addCityList(parentId, type) {
      this.addresCityList = await getCityList({ parentId })
      type === 'change' && (this.formData.cityId = null)
    },
    // 获取地区列表
    async getAreaList(parentId) {
      this.areaList = await getCityList({ parentId })
    },
    async addAreaList(parentId) {
      this.addresAreaList = await getCityList({ parentId })
    },
    // onSubmit() {
    //   console.log('submit!')
    // },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    handleClick(row) {
      this.$router.push({
        path: '/business/editorder'
      })
      console.log(row)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formInline.pageSize = val
      this.initData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formInline.page = val
      this.initData()
    }

  }
}
</script>

<style>
.el_one{
  padding-top: 20px;
  padding-left: 30px;
  background-color: #fff;
}
.el_tow{
  padding: 30px 30px 0 30px;
  margin-top: 20px;
  background-color: #fff;

}
.el_tow_yi{
  border-style: solid;
  border-width: 1px;
  border-color: #ebeef5;
}
.el_s{
  padding-left: 300px;
}
</style>
